<template>
	<view>
		<view class="list" @click="upload">
			<view class="">头像</view>
			<view class="">
				<image class="avator" :src="userinfo.headimg" mode=""></image>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view @click="save('修改昵称')" class="list">
			<view>
				昵称
			</view>
			<view>
				{{userinfo.nickname || '点击去修改昵称'}}
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view @click="save('修改姓名')" class="list">
			<view>
				姓名
			</view>
			<view>
				{{userinfo.name || '点击去修改姓名'}}
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="list" @click="sexy_show = true">
			<view>性别</view>
			<view class="">
				{{userinfo.gender == 1 ? '男' : '女'}}
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="com-line"></view>
		<view class="list">
			 <!-- @click="save('修改手机号')" -->
			<view>
				手机
			</view>
			<view>
				{{userinfo.mobile || '未绑定'}}
			</view>
		</view>
		
		<u-picker @confirm="confirmtime" v-model="showtime" mode="time"></u-picker>
		<u-picker @confirm="confirmaddress" v-model="showaddress" mode="region"></u-picker>
		<u-popup v-model="sexy_show" mode="bottom" border-radius="20">
			<view class="sexy-popup">
				<view class="sexy-list" v-for="(it, i) in sexArr" :class="genderId == it.id ? 'color-red' : ''" :key="i" @click="selectG(it)">
					{{it.name}}
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				showtime:false,
				showaddress:false,
				address:'',
				date:'',
				userinfo: '',
				sexy_show: false,
				sexArr: [{id: 1, name: '男'}, {id: 2, name: '女'}],
				genderId: '',
				store_id: ''
			}
		},
		onShow() {
			this.store_id = uni.getStorageSync('store_id')
			this.getUserInfo()
		},
		methods:{
			getUserInfo() {
				this.$ajaxRequest.get(this.baseUrl + 'user/info', {
					store_id: this.store_id
				}, true).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.userinfo = res.data.data
					} else {
						uni.showToast({
							title:res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			save(title){
				uni.navigateTo({
					url:'xiugai/index?title=' + title
				})
			},
			// 换头像
			upload() {
				let self = this
				uni.chooseImage({
				    count: 6, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
				        console.log(res.tempFilePaths);
						let img_url = res.tempFilePaths[0]
						self.$ajaxRequest.fileUpload(self.baseUrl + 'common/upload', img_url, false).then(res => {
							console.log(JSON.parse(res.data))
							let imgRes = JSON.parse(res.data)
							if (imgRes.code == 200) {
								self.userinfo.headimg = imgRes.data
								self.editUserInfo()
							} else {
								uni.showToast({
									title:res.data.msg,
									icon: 'none'
								})
							}
						})
				    }
				});
				
			},
			// 修改用户信息
			editUserInfo() {
				this.$ajaxRequest.put(this.baseUrl + 'user/Info', {
					headimg: this.userinfo.headimg,
					gender: this.genderId
				}, true).then(res => {
					if (res.data.code == 200) {
						this.getUserInfo()
					} else {
						uni.showToast({
							title:res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			selectG(it) {
				this.genderId = it.id
				this.editUserInfo()
				this.sexy_show = false
			},
			confirmtime(e){
				console.log(e)
				let date = e.year + '-' + e.month + '-' + e.day
				this.userinfo.birthday = date
				// this.date = e.year + '-' + e.month + '-' + e.day
			},
			confirmaddress(e){
				console.log(e)
				this.address = e.province.label + e.city.label + e.area.label
				// this.date = e.year + '-' + e.month + '-' + e.day
			},
			getaddress(){
				this.showaddress = true
			},
			gettime(){
				this.showtime = true
			}
		}
	}
</script>

<style>
	page {
		background-color: #FBF8F9;
	}
	.list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 30rpx 30rpx 30rpx;
		border-bottom: 1rpx solid rgba(167,167,167,.2);
		background-color: #fff;
	}
	.avator {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.list>view:first-of-type{
		font-size: 30rpx;
		color: #323232;
		/* font-weight: 600; */
	}
	.list>view:last-of-type{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #A7A7A7;
	}
	.sexy-popup {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}
	.sexy-list {
		padding: 30rpx 0;
		text-align: center;
		border-bottom: 1rpx solid #f5f5f5;
	}
	.color-red {
		color: #FF7B3D;
	}
</style>
